input.trigger {
  display:inline-block;
  margin:0px;
  padding:0px;
}

.spoiler {
  overflow:hidden;
  background-color:white;
  margin:10px 0px 0px;
  padding:0px 30px;
  height:0px;
  visibility:hidden;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

input.trigger + label,
input.trigger + br + label {
    margin:10px 0px 0px 20px;
  background-color:#333;
   zoom: 1;
 filter: alpha(opacity=50);
 opacity: 0.5;  color:white;
    border: solid 1px #000066;
  padding:5px 10px;
  cursor:pointer;
  position:relative;
  left:-0.8em;    
}

input.trigger:checked ~ .spoiler {
  padding:15px 30px 20px 20px;
   
  visibility:visible;
  height:300px;
  overflow:auto;
}
/*------------- START Blogger Threaded Comments  -------------*/

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;

}


.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment-thread.inline-thread .comment {
  margin:0px 0px 5px 30%; /* Level 6+ */
}


.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; } /* Level 1 */
.comments .comment .comment-actions a {
display:block;
width:40px;
margin:0px 0 20px -70px;
text-decoration:none;
padding:2px 7px 3px 5px;
text-transform:none;
color:white !important;
background-color:#527915;
background-image:linear-gradient(top,#64931C,#527915);
font:normal 10px Tahoma,Verdana,Arial,Sans-Serif;
box-shadow:0 2px 2px black;
border-radius:3px 0 0 3px;
transition:all 0.16s ease-in-out;
}
.comments .continue a {
display:block;
margin:-30px 0px 100px 3px;
text-decoration:none;
padding:2px 7px 3px;
text-transform:none;
color:white !important;
background-color:#527915;
background-image:linear-gradient(top,#64931C,#527915);
font:normal 10px Tahoma,Verdana,Arial,Sans-Serif;
box-shadow:0 2px 2px black;
border-radius:3px 0 0 3px;
transition:all 0.16s ease-in-out;
border:none;
}


.comments .comment .comment-actions a:hover,.comments .comment .comment-actions a:focus,.comments .comment .comment-actions a.clicked  {
margin:0px 0 20px -75px;
padding:2px 10px 3px 7px;
outline:none !important;
background-color:#890586;
background-image:linear-gradient(top,#890586,#5F085D);
border:none;
cursor: pointer;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content  {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comment-replies{

 margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;

}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comment-thread{background-color: #333;
border:1px solid #3c3c3c;
box-shadow:inset 0 0 3px #000;
color:#fff; 
 padding: 20px;
}
.comment-header {bbackground-color: #333;
border:1px solid #3c3c3c;
box-shadow:inset 0 0 3px #000;
    margin-bottom: 5px;
    padding: 5px;
}
.comment-header  a{bbackground-color: #333;
color:#FFFFFF;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
margin-top: -5px;
  cursor: pointer;
  display: inline-block;

}
.comments .continue {
  cursor: pointer;

}

.comments .continue a:hover,
.comments .continue a:focus,
.cm_reply a.clicked {
margin:-30px 0px 100px -3px;
padding:2px 7px 3px;
outline:none !important;
background-color:#890586;
background-image:linear-gradient(top,#890586,#5F085D);
cursor: pointer;

}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(" AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(" AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}


#blogger-comments-page.comments.comments-page div.avatar-image-container {
max-width:none;
max-height:none;
width:45px !important;  /* Lebar kontainer avatar */
height:45px !important; /* Lebar kontainer avatar */
box-shadow:0 1px 2px black;
background-color:#666;
background-clip:content-box;
transition:all 0.5s ease-out;
margin:0 0 3px;
vertical-align:middle;
border:1px solid #3c3c3c;
padding:4px;
}
#blogger-comments-page.comments.comments-page div.avatar-image-container img {
width:45px !important;
  height:45px !important;
  max-width:100%;
  max-height:100%;
  overflow:visible;
  float:none;
}

#blogger-comments-page.comments.comment-thread .avatar-image-container img:hover {
opacity:0.7;
}
.comments .comment-block {
margin-left:58px;
padding:16px 16px 16px;
border:1px solid #3c3c3c;
background-color:#333;
box-shadow:0 1px 2px black;
position:relative;
transition:all 1s ease-out;
 
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}



/*------------- End of Blogger Threaded Comments  -------------*/


